<template>
	<view>
		<!-- 商品详情 -->
		<view class="itemImgWrapper">
			<!-- 图片 -->
			<!-- 轮播 -->
			<swiper class="swipInner" indicator-dots autoplay circular>
				<swiper-item v-for="o in good.imgList">
					<image class="imgDetail" :src="o.url" alt="" mode="aspectFill">
				</swiper-item>
			</swiper>
		</view>
		<view class="detailInfo">
			<!-- 详细信息 -->
			<view class="info1">
				<view class="price">秒杀价￥{{good.killPrice}}</view>
				<view class="text">{{good.title}}</view>
			</view>
			<view class="info2" style="background-color: #fff;">
				<uni-grid :column="4" border-color="#03a9f4">
					<!-- 	<uni-grid-item :index="0" style="float: right;">
						<view class="grid-item-box" style="line-height: 80rpx;">
							<view style="font-size: 43rpx; text-align: center; ">{{good.condition}}</view>
							<view style="font-size: 36rpx; text-align: center;color: #999999;">贮存条件</view>
						</view>
					</uni-grid-item> -->
					<uni-grid-item :index="1" style="float: right;">
						<view class="grid-item-box" style="line-height: 80rpx;">
							<view style="font-size: 43rpx; text-align: center; ">{{good.breed}}</view>
							<view style="font-size: 36rpx; text-align: center;color: #999999;">品种</view>
						</view>
					</uni-grid-item>
					<!-- <uni-grid-item :index="2" style="float: right;">
						<view class="grid-item-box" style="line-height: 80rpx;">
							<view style="font-size: 43rpx; text-align: center; ">{{good.typeName}}</view>
							<view style="font-size: 36rpx; text-align: center;color: #999999;">商品类型</view>
						</view>
					</uni-grid-item> -->
					<uni-grid-item :index="3" style="float: right;">
						<view class="grid-item-box" style="line-height: 80rpx;">
							<view style="font-size: 43rpx; text-align: center; ">{{good.total}}</view>
							<view style="font-size: 36rpx; text-align: center;color: #999999;">库存</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="midPart">
				<view class="comment" @click="jumpCommentDetail">
					<view class="top">
						<view class="text">用户评价</view>
						<view class="icon">
							<uni-icons type="right" size="30"></uni-icons>
						</view>
					</view>
					<view class="bottom">
						<view class="img">
							<image class="userImg" :src="comment.imgSrc" mode=""></image>
						</view>
						<view class="nickName">{{comment.nickName}}</view>
						<view class="createTime">{{comment.createTime}}</view>
						<view class="content">{{comment.content}}</view>
					</view>
				</view>
			</view>

			<view>
				<view class="uni-container">
					<!-- <uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup"
							@click="onClick" @buttonClick="buttonClick" /> -->
					<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
						@buttonClick="buttonClick" style="margin-top: 20px;" />
					<!-- <view class="goods-carts">
						<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
							@buttonClick="buttonClick" />
					</view> -->

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(e) {
			console.log(e);
			this.id = e.id;
			this.selSeckillGood();
			this.selGoodComment();
		},
		data() {
			return {
				commentList: [],
				comment: {},
				id: "",
				goodList: [],
				good: {},
				options: [{
					// icon: 'chat',
					// text: '客服'
				}, {
					// icon: 'shop',
					// text: '店铺',
					// info: 2,
					// infoBackgroundColor: '#007aff',
					// infoColor: "#f5f5f5"
				}, {
					icon: '',
					text: '',
					// info: 0,
				}],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
			};
		},
		methods: {
			jumpCommentDetail() {
				uni.navigateTo({
					url: "/pages/commentDetail/commentDetail?itemId=" + this.id
				})
			},
			selGoodComment() {
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: "api/appuser/selGoodComment",
					header: {
						"authority": jwt
					},
					method: 'GET',
					data: {
						itemId: this.id
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.commentList = res.data.data;
						}
						this.comment = this.commentList[0];
						// console.log(this.comment);
						if (this.comment == undefined) {
							this.comment = {};
							this.comment.content = "暂无评价。。。";
						}
					}
				})
			},
			buttonClick(e) {
				console.log(e);
				if (e.index == 0) { // 立即购买
					let item = JSON.stringify(this.good);
					uni.setStorageSync('good', item);
					uni.navigateTo({
						url: "/pages/seckillSubmitOrder/seckillSubmitOrder"
					})
				}
			},
			selSeckillGood() {
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: "api/appindex/selKillGood",
					method: 'GET',
					header: {
						"authority": jwt
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.goodList = res.data.data;
						}
						this.goodList.forEach(e => {
							if (e.id == this.id) {
								this.good = e;
							}
						})
						// console.log(this.good);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f6;
	}

	.itemImgWrapper {
		width: 750rpx;
		height: 500rpx;
		// border: 1px solid red;

		.swipInner {
			width: 100%;
			height: 100%;

			.imgDetail {
				width: 100%;
				height: 100%;
			}
		}
	}

	.detailInfo {
		margin-top: 10px;

		.info1 {
			width: 700rpx;
			height: 100px;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 30rpx;


			.price {
				font-size: 24px;
				color: #ff4b37;
				margin-left: 4rpx;
			}

			.text {
				font-size: 29px;
				margin-left: 5rpx;
			}
		}
	}

	.uni-container {
		position: fixed;
		width: 600rpx;
		z-index: 999;
		bottom: var(--window-bottom);
	}

	.midPart {
		width: 700rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 0 auto;
		margin-top: 50rpx;

		.comment {
			.top {
				// background-color: #ff4b37;
				height: 100rpx;
				border-bottom: 1px solid gray;
				line-height: 100rpx;

				.text {
					float: left;
					font-size: 30rpx;
					margin-left: 20rpx;
				}

				.icon {
					float: right;
					margin-right: 10rpx;
				}
			}

			.bottom {
				.img {
					float: left;
					margin-top: 5rpx;
					margin-left: 5rpx;

					.userImg {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}
				}

				.nickName {
					float: left;
					width: 280rpx;
					height: 70rpx;
					line-height: 90rpx;
					margin-left: 10rpx;
					// background-color: gray;
				}

				.createTime {
					float: left;
					width: 300rpx;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 25rpx;
				}

				.content {
					float: left;
					// background-color: gray;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>